<template>
  <div class="q-pa-md">
    <div class="row q-gutter-sm">
      <q-btn no-caps color="teal" @click="triggerTwice" label="Trigger twice" />
      <q-btn no-caps color="teal" @click="triggerNoGroupingTwice" label="Trigger twice (no grouping)" />
      <q-btn no-caps color="teal" @click="triggerTwiceCustomGroup" label="Trigger twice (custom group)" />
    </div>
  </div>
</template>

<script>
import { useQuasar } from 'quasar'

export default {
	setup() {
		const $q = useQuasar()
		return {
			showNotif(position, message, color) {
				const icon = 'report_problem';
				
				const buttonColor = 'white';
				
					$q.notify({
						color,
						// textColor,
						icon: icon,
						message,
						position,
						// avatar,
						multiLine: true,
						actions: true
							? [
								{ label: 'Reply', color: buttonColor, handler: () => { /* console.log('wooow') */ } },
								{ label: 'Dismiss', color: 'yellow', handler: () => { /* console.log('wooow') */ } }
							  ]
							: (random > 40
								? [{ label: 'Reply', color: buttonColor, handler: () => { /* console.log('wooow') */ } }]
								: null
							  ),
						timeout: Math.random() * 5000 + 3000
					})
				}
			
			
		}
	},

    data () {
        return {
            path:"ws://172.100.101.26:8087/api/ws/",
            socket:""
        }
    },
    mounted () {
        // 初始化
        this.init()
    },
    methods: {
        init: function () {
            if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
            }else{
                // 实例化socket
                this.socket = new WebSocket(this.path)
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.error
                // 监听socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        open: function () {
            console.log("socket连接成功")
        },
        error: function () {
            console.log("连接错误")
        },
        getMessage: function (msg) {
			var data = JSON.parse(msg.data)
			var color;
			console.log(data)
			if(data["message"]){
				if(data["warning_type"]==0){
					switch(data["warning_level"]) {
						case 1:
							color = "warning";
							break;
						case 2:
							color = "negative";
							break;
						default:
							color = "ongoing";
					}
				}
				this.showNotif("top-right", data["message"], color);
			}
        },
        send: function () {
            this.socket.send(params)
        },
        close: function () {
            console.log("socket已经关闭")
        }
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    }
}
</script>


<style>

</style>